<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../../static/layui/css/layui.css">
    <script src="../../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../../static/layui/layui.js"></script>

</head>
<body>
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="status" value="{{status}}" title="通过" lay-filter="lockDemo" {{ status == 1 ?'checked' : '' }}>
</script>


<table id="selectCourseList" lay-filter="test" lay-data="{id: 'courseNowRow'}"></table>



<script>
    layui.use('table', function () {
        var table = layui.table
            ,form = layui.form;

        //第一个实例
        table.render({
            elem: '#selectCourseList'
            , id: "courseNowRow"
            , title: "我的课程"
            //, toolbar: 'default'
            , height: 550
            , size:"lg"
            , even: true
           // , size: "lg"
            , url: '${pageContext.request.contextPath}/queryStudentSelectedCourse?studentId=${sessionScope.student.studentId}' //数据接口
            , page: true //开启分页
            //,totalRow:true
            ,cols: [[
                //{type:'checkbox'}
                 {field: 'courseId', title: '课程ID', align:'center', width: 80, sort: true}
                , {field: 'courseName', title: '课程名称', align:'center', width: 160, sort: true}
                , {field: 'courseType', title: '课程类型',align:'center', width: 120, sort: true}
                , {field: 'courseCredit', title: '课程学分', align:'center', width: 100, sort: true}
                , {field: 'courseHour', title: '课程学时', align:'center', width: 100, sort: true}
                , {field: 'teacherId', title: '教师ID', align:'center', width: 100, sort: true}
                , {field: 'teacherName', title: '教师姓名', align:'center', width: 100, sort: true}
                , {field: 'score', title: '分数', align:'center', width: 100, sort: true}
                , {field: 'courseVolume', title: '可容纳人数', align:'center', width: 110, sort: true}
               // , {field: 'status', title: '状态',templet: '#checkboxTpl', align:'center',width: 100, sort: true}
                , {field: 'courseDesc', title: '课程描述', align:'center', width: 135}
            ]]
        });


        //监听行单击事件
        table.on('row(test)', function(obj){
           // console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data)
            var data = obj.data;
            layer.msg("课程名："+data.courseName) //得到当前行数据

            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });

        //监听事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });

    });



</script>


</body>
</html>
